<style>
    /*不显示秒*/
    .layui-laydate-content>.layui-laydate-list {
        padding-bottom: 0px;
        overflow: hidden;
    }
    .layui-laydate-content>.layui-laydate-list>li{
        width:50%
    }

    .merge-box .scrollbox .merge-list {
        padding-bottom: 5px;
    }
    .times .layui-inline span{ margin-right: -100%; }
    .input_select_box{ position: relative; }
    .input_select_box .select{ margin-top: -38px; }
    .input_select_box .select .layui-select-title *{ display: none; }
</style>
<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body">

        <!--        <div class="layui-form-item">-->
        <!--            <label class="layui-form-label">考勤适用店铺</label>-->
        <!--            <div class="layui-input-block input_select_box">-->
        <!--                <input name="store_name" value='{$vo.store_name|default=""}' required placeholder="请输入考勤适用店铺" class="layui-input inp_store_name">-->
        <!--                <input type="hidden" name="store_id" value='{$vo.store_id|default=""}' required placeholder="请输入考勤适用店铺" class="layui-input inp_store_id">-->
        <!--                <p class="help-block"></p>-->
        <!--                <label class="layui-input-inline select">-->
        <!--                    <select name="" id="shopName" lay-verify="" lay-filter="shopName">-->
        <!--                        <option value="">请选择门店</option>-->
        <!--                    </select>-->
        <!--                </label>-->
        <!--            </div>-->
        <!--        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input name="name" value='{$vo.name|default=""}' placeholder="请输入名称" class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">考勤年度</label>
            <div class="layui-input-block">
                <label class="layui-input-inline">
                    <select name="year" lay-verify="">
                        <option value="">请选择考勤年度</option>
                        <option value="2021" {if isset($vo.year) && $vo.year==2021 } selected="selected" {/if}>2021年</option>
                        <option value="2022" {if isset($vo.year) && $vo.year==2022 } selected="selected" {/if}>2022年</option>
                        <option value="2023" {if isset($vo.year) && $vo.year==2023 } selected="selected" {/if}>2023年</option>
                        <option value="2024" {if isset($vo.year) && $vo.year==2024 } selected="selected" {/if}>2024年</option>
                        <option value="2025" {if isset($vo.year) && $vo.year==2025 } selected="selected" {/if}>2025年</option>
                        <option value="2026" {if isset($vo.year) && $vo.year==2026 } selected="selected" {/if}>2026年</option>
                    </select>
                </label>
            </div>
        </div>

<!--        <div class="layui-form-item times" id="beginTimes">-->
<!--            <label class="layui-form-label">考情开始时间</label>-->
<!--            <div class="layui-inline"> &lt;!&ndash; 注意：这一层元素并不是必须的 &ndash;&gt;-->
<!--                <input name="begin_time" class="layui-input" id="beginTimesInput" value='{$vo.begin_time|default=""}'  placeholder="请输入考勤开始时间" required>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-form-item times" id="overTimes">-->
<!--            <label class="layui-form-label">考情开始时间</label>-->
<!--            <div class="layui-inline"> &lt;!&ndash; 注意：这一层元素并不是必须的 &ndash;&gt;-->
<!--                <input name="over_time" class="layui-input" id="overTimesInput" value='{$vo.over_time|default=""}'  placeholder="请输入考勤结束时间" required>-->
<!--            </div>-->
<!--        </div>-->


        <div class="layui-form-item times" id="goWorkTime">
            <label class="layui-form-label">上班时间</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input name="go_work_time" class="layui-input" id="goWorkTimeInput" value='{$vo.go_work_time|default=""}'  placeholder="请输入上班时间" required>
            </div>
        </div>

        <div class="layui-form-item times" id="offWorkTime">
            <label class="layui-form-label">下班时间</label>
            <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
                <input name="off_work_time" class="layui-input" id="offWorkTimeInput" value='{$vo.off_work_time|default=""}'  placeholder="请输入下班时间" required>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">考勤统计</label>
            <div class="layui-input-block">
                <label class="layui-input-inline">
                    <select name="check_week_begin" lay-verify="">
                        <option value="">请选择开始星期</option>
                        <option value="1" {if isset($vo.check_week_begin) && $vo.check_week_begin==1 } selected="selected" {/if}>周一</option>
                        <option value="2" {if isset($vo.check_week_begin) && $vo.check_week_begin==2 } selected="selected" {/if}>周二</option>
                        <option value="3" {if isset($vo.check_week_begin) && $vo.check_week_begin==3 } selected="selected" {/if}>周三</option>
                        <option value="4" {if isset($vo.check_week_begin) && $vo.check_week_begin==4 } selected="selected" {/if}>周四</option>
                        <option value="5" {if isset($vo.check_week_begin) && $vo.check_week_begin==5 } selected="selected" {/if}>周五</option>
                        <option value="6" {if isset($vo.check_week_begin) && $vo.check_week_begin==6 } selected="selected" {/if}>周六</option>
                        <option value="7" {if isset($vo.check_week_begin) && $vo.check_week_begin==0 } selected="selected" {/if}>周日</option>
                    </select>
                </label>
                <label class="layui-input-inline">
                    <select name="check_week_over" lay-verify="">
                        <option value="">请选择开始星期</option>
                        <option value="1" {if isset($vo.check_week_over) && $vo.check_week_over==1 } selected="selected" {/if}>周一</option>
                        <option value="2" {if isset($vo.check_week_over) && $vo.check_week_over==2 } selected="selected" {/if}>周二</option>
                        <option value="3" {if isset($vo.check_week_over) && $vo.check_week_over==3 } selected="selected" {/if}>周三</option>
                        <option value="4" {if isset($vo.check_week_over) && $vo.check_week_over==4 } selected="selected" {/if}>周四</option>
                        <option value="5" {if isset($vo.check_week_over) && $vo.check_week_over==5 } selected="selected" {/if}>周五</option>
                        <option value="6" {if isset($vo.check_week_over) && $vo.check_week_over==6 } selected="selected" {/if}>周六</option>
                        <option value="7" {if isset($vo.check_week_over) && $vo.check_week_over==0 } selected="selected" {/if}>周日</option>
                    </select>
                </label>
            </div>
        </div>

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">是否排除国家法定节假日 </label>-->
<!--            <div class="layui-input-block">-->
<!--                <label>-->
<!--                    <input type="radio" name="is_exclude" value="1" required title="是" onclick="click_date_time(0)" {if isset($vo.is_exclude) && $vo.is_exclude==1 }checked{/if}>-->
<!--                </label>-->
<!--                <label>-->
<!--                    <input type="radio" name="is_exclude" value="2" required title="否" onclick="click_date_time(1)" {if isset($vo.is_exclude) && $vo.is_exclude==2 }checked{/if}>-->
<!--                </label>-->
<!--                <p class="help-block"></p>-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">状态 </label>
            <div class="layui-input-block">
                <label>
                    <input type="radio" name="status" value="1" required title="未开始" onclick="click_date_time(0)" {if isset($vo.status) && $vo.status==1 }checked{/if}>
                </label>
                <label>
                    <input type="radio" name="status" value="2" required title="启用" onclick="click_date_time(1)" {if isset($vo.status) && $vo.status==2 }checked{/if}>
                </label>
                <label>
                    <input type="radio" name="status" value="3" required title="禁用" onclick="click_date_time(1)" {if isset($vo.status) && $vo.status==3 }checked{/if}>
                </label>
                <p class="help-block"></p>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input name="remark" value='{$vo.remark|default=""}' placeholder="请输入备注" class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>

    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>
</form>
<script>
    form.render();
</script>
<script>
    layui.use(['laydate', 'jquery', 'form'], function(){
        var laydate = layui.laydate,
            $ = layui.jquery,
            form = layui.form,
            ajaxRes = []

        // 考勤适用店铺 star
        form.on('select(shopName)', function (d) {
            var name = ajaxRes.filter(f => f.id == d.value)[0] || {}
            $('input[name="store_name"]').val(name.name).blur();
            $('.inp_store_name').val(name.name||'')
            $('.inp_store_id').val(name.id||'')
            console.log('选择的结果', name);
        })
        var times;
        $('input[name="store_name"]').on('input', function (e) {
            var val = this.value || '',
                that = this
            clearTimeout(times)
            times = setTimeout(function () {
                if ($(that).next().find('.layui-form-selected').length == 0) {
                    $('#shopName').next().find('.layui-input').trigger('click')
                }
                // 这里放其他操作
                get_store_list(val)

            }, 500) // 请求频率（毫秒）
        })

        // 考勤适用店铺 end
        //执行一个laydate实例
        laydate.render({
            elem: '#beginTimes', //指定元素
            format: 'yyyy-MM-dd', //可任意组合
            type:'date',
            // ready: function(){ $(".laydate-time-list li").eq(2).remove();},
            done: function(value, date, endDate){
                $('#beginTimesInput').val(value).blur();
            }
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#overTimes', //指定元素
            format: 'yyyy-MM-dd', //可任意组合
            type:'date',
            // ready: function(){ $(".laydate-time-list li").eq(2).remove();},
            done: function(value, date, endDate){
                $('#overTimesInput').val(value).blur();
            }
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#goWorkTime', //指定元素
            format: 'yyyy-MM-dd', //可任意组合
            type:'time',
            // ready: function(){ $(".laydate-time-list li").eq(2).remove();},
            done: function(value, date, endDate){
                $('#goWorkTimeInput').val(value).blur();
            }
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#offWorkTime', //指定元素
            format: 'yyyy-MM-dd', //可任意组合
            type:'time',
            // ready: function(){ $(".laydate-time-list li").eq(2).remove();},
            done: function(value, date, endDate){
                $('#offWorkTimeInput').val(value).blur();
            }
        });

        //获取门店列表
        function get_store_list(val){
            $.ajax({
                type:"GET",
                url:'{:url("search_store")}?store_name='+val,
                dataType:"json",
                success:function(data){
                    console.log(data)
                    ajaxRes = data.data
                    seHtml(data.data);
                    form.render('select')
                    if ($('#shopName').next().find('.layui-form-selected').length == 0) {
                        $('#shopName').next().find('.layui-input').trigger('click')
                    }
                },
                error:function(jqXHR){
                    alert("发生错误："+ jqXHR.status);
                }
            });
        }
        function seHtml(data) {
            var h = '<option value="">请选择门店</option>'
            $.each((data||[]), function (i,li) {
                h += '<option value="'+li.id+'" data-name="'+li.name+'">'+li.name+'</option>'
            })
            $('#shopName').empty().append(h)
            $('#shopName').next().find('dl').empty().append(h)
        }
    });

    function click_date_time(num) {
        if (num == 1) {
            $('#timeBox').show()
        } else {
            $('#timeBox').hide()
        }

    }
</script>



